<template>
    <view class="min-h-screen bg-gradient-to-br from-sky-50 to-purple-50 flex flex-col items-center py-[20rpx] font-[PingFang_SC,Microsoft_YaHei,sans-serif]">
      <!-- 主容器 -->
      <view class="w-[95%] max-w-[750rpx] bg-white rounded-[25rpx] shadow-[0_15rpx_50rpx_rgba(0,0,150,0.15)] overflow-hidden relative">
        
        <!-- 顶部标题区域 -->
        <view class="bg-gradient-to-r from-blue-600 to-blue-900 text-white px-[40rpx] py-[25rpx] text-center relative">
          <!-- <image src="https://pic.616pic.com/ys_bnew_img/00/04/07/3Q5gXzUcQT.jpg" class="w-[120rpx] h-[120rpx] mx-auto mb-[15rpx] rounded-full" mode="aspectFit"></image> -->
          <text class="text-[38rpx] font-semibold tracking-[1rpx] mb-[10rpx] block text-shadow-[0_2rpx_4rpx_rgba(0,0,0,0.2)]">全面健康评估</text>
          <text class="text-[18rpx] opacity-90 max-w-[600rpx] mx-auto block leading-[1.6]">全面评估您的健康状况，识别潜在风险，制定个性化护理计划</text>
        </view>
        
        <!-- 评估进度 -->
        <view class="px-[40rpx] py-[30rpx]">
          <view class="flex justify-between mb-[12rpx]">
            <text class="text-[24rpx]">评估进度</text>
            <text class="text-[24rpx] font-medium">65%</text>
          </view>
          <view class="h-[16rpx] bg-gray-200 rounded-[10rpx] overflow-hidden">
            <view class="h-full bg-blue-600 w-[65%] rounded-[10rpx]" ref="progressBar"></view>
          </view>
        </view>
        
        <!-- 评估项目列表 -->
        <view class="px-[40rpx] pb-[40rpx]">
          <view 
            v-for="(item, index) in assessmentItems" 
            :key="index" 
            class="bg-white rounded-[16rpx] my-[25rpx] shadow-[0_5rpx_15rpx_rgba(0,0,100,0.08)] transition-all duration-300 overflow-hidden border-l-[5rpx] border-blue-600 hover:translate-y-[-5rpx] hover:shadow-[0_8rpx_25rpx_rgba(26,115,232,0.2)]"
            :class="{ 'active': activeItems[index] }"
            @click="toggleItem(item)"
          >
            <view class="flex justify-between items-center px-[30rpx] py-[22rpx] cursor-pointer">
              <view class="flex items-center">
                <view class="bg-blue-600 text-white w-[36rpx] h-[36rpx] rounded-full flex justify-center items-center font-bold mr-[18rpx] text-[18rpx]">{{ index + 1 }}</view>
                <!-- <image :src="item.icon" class="w-[40rpx] h-[40rpx] mr-[15rpx]" mode="aspectFit"></image> -->
                <text class="text-[26rpx] text-gray-800 font-semibold">{{ item.title }}</text>
              </view>
              <Button class="bg-[#000] from-blue-400 to-blue-600 text-white border-none rounded-[50rpx] px-[28rpx] py-[12rpx] text-[18rpx] font-medium shadow-[0_4rpx_10rpx_rgba(26,115,232,0.3)] hover:scale-105 hover:shadow-[0_6rpx_15rpx_rgba(26,115,232,0.4)] transition-all duration-300">
                {{ activeItems[index] ? '收起详情' : '查看详情' }}
                <IconFont name="right" size="16" class="ml-[8rpx] transform transition-transform duration-300" :class="{ 'rotate-180': activeItems[index] }" />
              </Button>
            </view>
            
            <!-- 展开内容 -->
            <view v-if="activeItems[index]" class="px-[30rpx] pb-[22rpx] border-t border-gray-100 animate-fadeIn">
              <text class="text-[22rpx] text-gray-600 leading-[1.6]">
                {{ item.description }}
              </text>
            </view>
          </view>
        </view>
        
        <!-- 底部区域 -->
        <!-- <view class="bg-gray-100 px-[40rpx] py-[25rpx] flex justify-between items-center border-t border-gray-200">
          <text class="text-gray-600 text-[16rpx]">{{ formatDate(currentDate) }}</text>
          <view class="flex gap-[20rpx]">
            <Button class="bg-gradient-to-r from-green-500 to-green-600 text-white border-none rounded-[50rpx] px-[30rpx] py-[14rpx] text-[18rpx] font-medium shadow-[0_4rpx_12rpx_rgba(76,175,80,0.3)] hover:translate-y-[-3rpx] hover:shadow-[0_7rpx_15rpx_rgba(0,0,0,0.2)] transition-all duration-300">
              保存评估
            </Button>
            <Button class="bg-gradient-to-r from-blue-600 to-blue-900 text-white border-none rounded-[50rpx] px-[30rpx] py-[14rpx] text-[18rpx] font-medium shadow-[0_4rpx_12rpx_rgba(26,115,232,0.3)] hover:translate-y-[-3rpx] hover:shadow-[0_7rpx_15rpx_rgba(0,0,0,0.2)] transition-all duration-300">
              提交报告
            </Button>
          </view>
        </view> -->
      </view>
    </view>
  </template>
  
  <script setup>
  import { ref, onMounted, onUnmounted } from 'vue'
  import { IconFont } from '@nutui/icons-vue-taro'
  import Taro from '@tarojs/taro'
  import { Button } from '@nutui/nutui-taro'
  
  // 评估项目数据
  const assessmentItems = ref([
    { 
      title: "人口学特征", 
      icon: "https://pic.616pic.com/ys_bnew_img/00/04/07/3Q5gXzUcQT.jpg",
      description: "包括年龄、性别、身高、体重、职业等基本信息，用于建立个人健康档案基础数据。"
    },
    { 
      title: "疾病病症", 
      icon: "https://pic.616pic.com/ys_bnew_img/00/04/07/3Q5gXzUcQT.jpg",
      description: "记录现有疾病史、既往病史、家族病史及当前症状表现，帮助医生全面了解健康状况。"
    },
    { 
      title: "一般健康状况", 
      icon: "https://pic.616pic.com/ys_bnew_img/00/04/07/3Q5gXzUcQT.jpg",
      description: "评估整体健康水平，包括睡眠质量、饮食习惯、运动频率等生活方式因素。"
    },
    { 
      title: "专科评估", 
      icon: "https://pic.616pic.com/ys_bnew_img/00/04/07/3Q5gXzUcQT.jpg",
      description: "针对特定系统或器官进行详细检查，如心血管系统、呼吸系统、消化系统等。"
    },
    { 
      title: "生理功能", 
      icon: "https://pic.616pic.com/ys_bnew_img/00/04/07/3Q5gXzUcQT.jpg",
      description: "评估各项生理指标，包括血压、心率、呼吸频率、体温等生命体征。"
    },
    { 
      title: "ICF自理能力", 
      icon: "https://pic.616pic.com/ys_bnew_img/00/04/07/3Q5gXzUcQT.jpg",
      description: "根据国际功能分类标准评估日常生活自理能力，包括进食、穿衣、洗漱等基本活动。"
    },
    { 
      title: "风险和并发症", 
      icon: "https://pic.616pic.com/ys_bnew_img/00/04/07/3Q5gXzUcQT.jpg",
      description: "分析潜在健康风险因素及可能发生的并发症，制定预防措施。"
    },
    { 
      title: "主要护理诊断/健康问题", 
      icon: "https://pic.616pic.com/ys_bnew_img/00/04/07/3Q5gXzUcQT.jpg",
      description: "基于评估结果确定主要健康问题，为制定护理计划提供依据。"
    },
    { 
      title: "初步护理计划", 
      icon: "https://pic.616pic.com/ys_bnew_img/00/04/07/3Q5gXzUcQT.jpg",
      description: "针对已确定的健康问题制定初步干预方案，包括治疗建议、康复计划等。"
    },
    { 
      title: "记录与签名", 
      icon: "https://pic.616pic.com/ys_bnew_img/00/04/07/3Q5gXzUcQT.jpg",
      description: "完整记录评估过程和结果，由评估医师签名确认，确保医疗文书的规范性。"
    }
  ])
  
  // 展开/收起状态
  const activeItems = ref({})
  
  // 切换展开/收起
  const toggleItem = (item) => {
    // activeItems.value[index] = !activeItems.value[index]
    if(item.title === '人口学特征'){
      Taro.navigateTo({
        url: '/pages/pinggu/part1'
      })
    }else if(item.title === '疾病病症'){
      Taro.navigateTo({
        url: '/pages/pinggu/part2'
      })
    }
  }
  
  // 动态日期
  const currentDate = ref(new Date())
  let timer = null
  
  // 格式化日期
  const formatDate = (date) => {
    return date.toLocaleDateString('zh-CN', {
      year: 'numeric',
      month: 'long',
      day: 'numeric'
    })
  }
  
  // 进度条动画
  const progressBar = ref(null)
  
  onMounted(() => {
    // 启动日期更新定时器
    timer = setInterval(() => {
      currentDate.value = new Date()
    }, 1000)
    
    // 进度条动画
    setTimeout(() => {
      if (progressBar.value) {
        progressBar.value.style.width = '65%'
      }
    }, 300)
  })
  
  onUnmounted(() => {
    // 清理定时器
    if (timer) {
      clearInterval(timer)
    }
  })
  </script>